<template>
  <el-dialog
    title="是否定制"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="70%"
  >
    <el-tabs>
      <el-tab-pane v-if="judgeShow(1)" label="现成镜片">
        <div>
          <div class="clearfix">
            <el-button class="add-btn" size="small" @click="addXP">新增</el-button>
          </div>

          <el-form ref="xpDataForm" :model="xpForm" label-width="80px">
            <template v-for="(item,index) in xpForm.list">
              <el-form :key="index+'xpform'" class="dataForm" :model="item" label-width="100px">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="请输入膜名称">
                      <el-input v-model="item.mc" style="width:160px" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="价格">
                      <el-input v-model="item.price" style="width:160px" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="请选择膜颜色">
                      <el-select v-model="item.mcColors" multiple placeholder="请选择" style="width:160px">
                        <el-option
                          v-for="jjtdItem in mcColorList"
                          :key="jjtdItem.value"
                          :label="jjtdItem.label"
                          :value="jjtdItem.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="8">
                    <el-form-item label="是否进口">
                      <el-select v-model="item.jkbz" placeholder="请选择" style="width:160px">
                        <el-option
                          v-for="jjtdItem in jkbzList"
                          :key="jjtdItem.value"
                          :label="jjtdItem.label"
                          :value="jjtdItem.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="code">
                      <el-input v-model="item.code" placeholder="请输入code" style="width:160px" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="渐进通道">
                      <el-select v-model="item.jjtds" multiple placeholder="请选择" style="width:160px">
                        <el-option
                          v-for="jjtdItem in jjtdOptions"
                          :key="jjtdItem"
                          :label="jjtdItem"
                          :value="jjtdItem"
                        />
                      </el-select>
                    </el-form-item>

                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="8">
                    <el-form-item label="下加光add">
                      <el-input v-model="item.xjgadd" placeholder="请输入以逗号分隔范围" style="width:160px" />
                    <!-- <el-select v-model="xjgadd" multiple placeholder="请选择">
                    <el-option
                      v-for="item in jjtdOptions"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select> -->
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="光度范围">
                      <el-button @click="gdfwBtn(index,'xp')"> 请选择 </el-button>
                    </el-form-item>
                  </el-col>
                </el-row>

                <div class="clearfix">
                  <el-button class="del-btn" size="small" @click="delXp(index)">删除</el-button>
                </div>
                <el-divider />
              </el-form>

            </template>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="judgeShow(2)" label="车片定制片">
        <div>
          <div class="clearfix">
            <el-button class="add-btn" size="small" @click="addDZ">新增</el-button>
          </div>
          <el-form ref="dZdataForm" :model="dzForm" label-width="80px">
            <template v-for="(item,index) in dzForm.list">
              <el-form :key="index+'dzform'" class="dataForm" :model="item" label-width="100px">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="请输入膜名称">
                      <el-input v-model="item.mc" style="width:160px" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="价格">
                      <el-input v-model="item.price" style="width:160px" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="请选择膜颜色">
                      <el-select v-model="item.mcColors" multiple placeholder="请选择" style="width:160px">
                        <el-option
                          v-for="jjtdItem in mcColorList"
                          :key="jjtdItem.value"
                          :label="jjtdItem.label"
                          :value="jjtdItem.value"
                        />
                      </el-select>
                    </el-form-item>

                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="8">
                    <el-form-item label="是否进口">

                      <el-select v-model="item.jkbz" placeholder="请选择" style="width:160px">
                        <el-option
                          v-for="jjtdItem in jkbzList"
                          :key="jjtdItem.value"
                          :label="jjtdItem.label"
                          :value="jjtdItem.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="code">
                      <el-input v-model="item.code" placeholder="请输入code" style="width:160px" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="渐进通道">
                      <el-select v-model="item.jjtds" multiple placeholder="请选择" style="width:160px">
                        <el-option
                          v-for="jjtdItem in jjtdOptions"
                          :key="jjtdItem"
                          :label="jjtdItem"
                          :value="jjtdItem"
                        />
                      </el-select>
                    </el-form-item>

                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="8">
                    <el-form-item label="下加光add">
                      <el-input v-model="item.xjgadd" placeholder="请输入以逗号分隔范围" style="width:160px" />
                      <!-- <el-select v-model="xjgadd" multiple placeholder="请选择">
                    <el-option
                      v-for="item in jjtdOptions"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select> -->
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="光度范围">
                      <el-button @click="gdfwBtn(index,'dz')"> 请选择 </el-button>
                      <!-- <el-select v-model="xjgadd" multiple placeholder="请选择">
                    <el-option
                      v-for="item in jjtdOptions"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select> -->
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="clearfix">
                  <el-button class="del-btn" size="small" @click="delDz(index)">删除</el-button>
                </div>
                <el-divider />
              </el-form>
            </template>

          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    <LuckysheetDialog ref="luckysheetDialog" @gdfwBack="gdfwBack" />
  </el-dialog>

</template>

<script>
import { isEmail, isMobile } from '@/utils/validate'
import { Debounce } from '@/utils/debounce'
import LuckysheetDialog from '@/components/LuckysheetDialog'
import sysApi from '@/api/sys'

export default {
  name: 'MembraneInit',
  components: {
    LuckysheetDialog
  },
  data() {
    var validatePassword = (rule, value, callback) => {
      if (!this.dataForm.id && !/\S/.test(value)) {
        callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }
    var validateComfirmPassword = (rule, value, callback) => {
      if (!this.dataForm.id && !/\S/.test(value)) {
        this.dataForm.password = ''
        callback(new Error('确认密码不能为空'))
      } else if (this.dataForm.password !== value) {
        callback(new Error('确认密码与密码输入不一致'))
      } else {
        callback()
      }
    }
    var validateEmail = (rule, value, callback) => {
      if (!isEmail(value)) {
        callback(new Error('邮箱格式错误'))
      } else {
        callback()
      }
    }
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      visible: false,
      roleList: [],
      dataForm: {
        id: 0,
        userName: '',
        password: '',
        comfirmPassword: '',
        email: '',
        mobile: '',
        roleIdList: [],
        status: 1
      },
      dataRule: {
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的用户名', trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        comfirmPassword: [
          { validator: validateComfirmPassword, trigger: 'blur' }
        ],
        email: [
          // { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ]
      },
      jjtdOptions: [
        '11mm',
        '12mm',
        '13mm',
        '14mm',
        '15mm'
      ],
      mcColorList: [
        {
          label: '灰变',
          value: '1'
        },
        {
          label: '茶变',
          value: '2'
        },
        {
          label: '绿变',
          value: '3'
        }
      ],
      jkbzList: [
        {
          label: '进口',
          value: '1'
        },
        {
          label: '国产',
          value: '0'
        }
      ],
      xpForm: { list: [] },
      dzForm: { list: [] },
      selectType: {
        index: 0,
        type: 'xp'
      },
      dzlxs: [],
      zIndex: 0,
      subIndex: 0
    }
  },
  methods: {
    gdfwBack(list) {
      if (this.selectType.type === 'xp') {
        this.xpForm.list[this.selectType.index].gdfws = list
      } else {
        this.dzForm.list[this.selectType.index].gdfws = list
      }
      console.log('this.selectType------>', this.selectType, this.xpForm)
    },
    judgeShow(type) {
      return this.dzlxs && this.dzlxs.indexOf(type) > -1
    },
    delXp(index) {
      this.xpForm.list.splice(index, 1)
    },
    delDz(index) {
      this.dzForm.list.splice(index, 1)
    },
    addXP() {
      const data = {
        mc: '',
        price: '',
        mcColors: [],
        jkbz: '',
        code: '',
        jjtds: '',
        xjgadd: '',
        gdfws: []
      }
      this.xpForm.list.push(data)
    },
    addDZ() {
      const data = {
        mc: '',
        price: '',
        mcColors: [],
        jkbz: '',
        code: '',
        jjtds: '',
        xjgadd: '',
        gdfws: []
      }
      this.dzForm.list.push(data)
    },
    openDialog(data, index) {
      this.dzlxs = data.dzlxs || []

      this.xpForm.list = data.xp || []
      this.dzForm.list = data.dz || []
      this.visible = true
      this.zIndex = index
    },
    // 车房 光度范围
    gdfwBtn(index, type) {
      this.selectType = {
        index,
        type
      }
      let list = []
      if (this.selectType.type === 'xp') {
        list = this.xpForm.list[this.selectType.index].gdfws
      } else {
        list = this.dzForm.list[this.selectType.index].gdfws
      }
      this.$refs.luckysheetDialog.openDialog(list)
    },
    // 表单提交
    dataFormSubmit: Debounce(function() {
      this.dzForm.list.forEach((item) => {
        item.xjgadd = item.xjgadd.replace(/，/g, ',')
      })

      this.xpForm.list.forEach((item) => {
        item.xjgadd = item.xjgadd.replace(/，/g, ',')
      })
      const data = {
        dz: this.dzForm.list,
        xp: this.xpForm.list
      }
      this.visible = false
      this.$emit('dzlxsBack', data, this.zIndex)
    })
  }
}
</script>
<style scoped>
.add-btn {
  float: right;
  overflow: hidden;
}
.del-btn {
   float: right;
  overflow: hidden;
}
</style>
